<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>疯狂奖学金</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="css/doc.min.css">
    <style type="text/css">
    	body{background: #f3f3f3}
    	header{background: #ef673c;color: #fff}
    	h2{margin: 0;padding: .5em 0;}
    	.icon-arrow-left{font-size: inherit;}
    	.balance{padding-left: 1.5em;background: url(images/balance.png) no-repeat left center;background-size: 1em;font-size: 1.4em}
    	a:active{text-decoration: none;}

    	.choice{font-size: 1.4rem;line-height: 3rem;margin-top: 20%;color: #fb463e}
    	.choice .active{position: absolute;left: 0;height: 3rem;border:3px solid orange;top: 3rem;width: 100%}
    	.opcity{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
    	.navbar-fixed-bottom div{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
    	.navbar-fixed-bottom .active{font-size: 1.2em;filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}

    	.btn{border-radius: 0;border:0;background: #ef673c;color: #fff}
		.btn:focus{border:0;background: #ef673c;color: #fff;box-shadow: none;}
		.btn:active{border:0;}
		
    </style>
</head>
<body class="hidden-md hidden-lg">
	<header class="clearfix">
		<div class="col-xs-2">
			<h2><i class="icon icon-arrow-left"></i></h2>
		</div>
		<div class="col-xs-8 text-center"><h2>疯狂奖学金</h2></div>
	</header>
	<div class="container">
		<div class="row text-center" style="padding:3em 0 2em;line-height:1.8em;background:#fc6638;color:#fff">
			<span class="balance">568.00</span>&nbsp;元&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" style="color:#fff">充值</a>
		</div>
		<div class="row" style="background:#fc6638;padding-bottom:2em">
			<div class="col-xs-3"><img style="width:100%;display:block" src="images/twenty-0.png"></div>
			<div class="col-xs-3"><img style="width:100%;display:block" src="images/ten-0.png"></div>
			<div class="col-xs-3"><img style="width:100%;display:block" src="images/five-0.png"></div>
			<div class="col-xs-3"><img style="width:100%;display:block" src="images/free-0.png"></div>
		</div>
		<div class="row choice">
			<div class="col-xs-3"></div>
			<div class="col-xs-5 text-center" style="background:#fff;position:relative;">
			 	<div class="active"></div>
				<div class="row opcity">期货</div>
				<div class="row" >股票</div>
				<div class="row opcity">宏观经济</div>
			</div>
			<div class="col-xs-3" style="padding:0">
				<img style="height:6rem" src="images/rocker.png">
			</div>
		</div>
		<div class="row" style="margin-top:5%">
			<div class="col-xs-3"></div>
			<div class="col-xs-5" style="padding:0">
				<button class="btn btn-block">开始</button>
			</div>
		</div>
	</div>
	<footer class="navbar-fixed-bottom text-center" style="padding:.6em 0;background:#fc6638;color:#fff">
		<div class="col-xs-4 active" style="height:1.6rem;line-height:1.6rem;border-right:1px solid #ccc">步步为赢</div>
		<div class="col-xs-4" style="height:1.6rem;line-height:1.6rem;border-right:1px solid #ccc">答题装账本</div>
		<div class="col-xs-4" style="height:1.6rem;line-height:1.6rem">数据统计</div>
	</footer>
</body>
</html>